<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM节点的常见操作</title>
  </head>

  <body>
    <!-- <h1 id="bd">百度一下</h1>
    <p class="wangzhi">https://www.baidu.com/</p>
    <p class="wangzhi">https://www.csdn.net/</p> -->
    <script>
        var result = document.createElement('div');
        result.innerHTML = '这是新创建的div里面插入的内容';
        document.body.appendChild(result);
        result.style.width = '200px';
        result.style.height = '200px'
        result.style.backgroundColor = 'skyblue';
        document.write('js直接写入');  //不用js创建元素，直接暴力写入
        // document.body.removeChild(result);


        // var result = document.getElementById('bd');
        // result.innerHTML = 'baiduyixia'
        // result.id = 'bd11';
        // result.style.backgroundColor = 'skyblue';
        // result.style.color = 'yellow'
    //   console.log("result:");
    //   var result = document.getElementById("bd");
    //   console.log(result);
    //   console.log("result2:");
    //   var result2 = document.getElementsByTagName("p")[1]; //csdn的网址
    //   console.log(result2);
    //   console.log("result3:");
    //   var result3 = document.getElementsByClassName('wangzhi')[0];  //百度的网址
    //   console.log(result3);
    //   console.log("result4:");
    //   var result4 = document.querySelector('.wangzhi');
    //   console.log(result4);
    //   console.log("result5:");
    //   var result5 = document.querySelectorAll('.wangzhi');
    //   console.log(result5);

      // -----------------分割线------------上边是练习
      // 通过元素id来查找元素
      // var bd = document.getElementById('bd');
      // console.log(bd);
      // // 通过标签名来查找元素
      // var wangzhi1 = document.getElementsByTagName('p')[0];
      // console.log(wangzhi1);
      // // 通过类名来查找元素
      // var wangzhi2 = document.getElementsByClassName('wangzhi')[1];
      // console.log(wangzhi2);
      // console.log('--------------------------------------')
      // // 通过css选择器来查找元素-默认查出第一个
      // var wz1 = document.querySelector('.wangzhi');
      // console.log(wz1);
      // // 通过css选择器来查找元素-默认查询所有
      // var wz2= document.querySelectorAll('.wangzhi');
      // console.log(wz2);

      // var bd = document.getElementById('bd');
      // // 改变元素的值
      // bd.innerHTML = 'baiduyixai';
      // // 改变元素的属性值
      // bd.id = 'bd1';
      // // 改变元素的样式
      // bd.style.backgroundColor = 'red';
      // bd.style.color = 'blue';

      // js创建一个div元素
      // var aa = document.createElement('div');
      // // js改变aa元素的值
      // aa.innerHTML = '这是js插入的新内容';
      // // js在body中添加创建的div元素
      // document.body.appendChild(aa);
      // // js直接写入html
      // document.write('js直接写入文本');
      // // js删除body中添加创建的div元素
      // document.body.removeChild(aa);
    </script>
  </body>
</html>
